<template>
  <s-layout title="隐患排查">
    <view class="filter-container">
      <!-- 搜索框 -->
      <view class="search-box">
        <view class="search-input-wrapper">
          <fui-icon name="search" :size="36" color="#BDBDBD"></fui-icon>
          <input
            v-model="searchKeyword"
            type="text"
            placeholder="搜索隐患标题"
            @input="handleSearch"
            class="search-input"
          />
          <view class="clear-btn" v-if="searchKeyword" @tap="clearSearch">
            <fui-icon name="close-fill" :size="28" color="#BDBDBD"></fui-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="list-item-management-box"> </view>
      <!-- 隐患排查 -->
      <view class="list-border">
        <view
          class="list-item border_5 animated fadeInUp"
          v-for="item in filteredList"
          :key="index"
          @click="navigateToDetail(item)"
        >
          <view class="list-item-box">
            <view class="list-item-left">
              <view class="list-item-left-img">
                <image :src="item.image?.[0]" mode="scaleToFill" />
              </view>
            </view>
            <view class="list-item-right">
              <view class="list-item-right-title">{{ item.title }}</view>
              <view
                class="cicon-more"
                style="
                  font-size: 50rpx;
                  position: relative;
                  top: -70rpx;
                  left: 430rpx;
                "
                @click.stop="editBoxShow(item)"
              ></view>
              <view class="editBox" v-if="activeEditItemId === item.id">
                <view
                  class="editBox-item"
                  @click.stop="activeEditItemId = null"
                >
                  <text
                    class="editBox-item-text"
                    @click="
                      sheep.$router.go('/pages/qy/hiddendanger/update', {
                        zhenggai: true,
                        id: item.id,
                      })
                    "
                    >整改</text
                  >
                </view>
                <view
                  class="editBox-item"
                  @click.stop="
                    sheep.$router.go(`/pages/qy/hiddendanger/update`, {
                      id: item.id,
                      zhenggai: false,
                    });
                    activeEditItemId = null; // Hide menu after clicking
                  "
                >
                  <text class="editBox-item-text">修改</text>
                </view>

                <view class="editBox-item" @click.stop="deleteItem(item)">
                  <!-- confirmDelete already handles hiding the menu -->
                  <text class="editBox-item-text">删除</text>
                </view>
              </view>
              <view>
                <view class="list-item-right-detail">
                  <text>检查情况：</text>
                  <text>
                    {{
                      {
                        1: "治理中",
                        2: "治理完成",
                        default: "无隐患",
                      }[item.situation] || "无隐患"
                    }}
                  </text>
                </view>
                <view class="list-item-right-detail2">
                  <text>检查时间：</text>
                  <text>{{ item.time }}</text>
                </view>
                <view class="list-item-right-tag-border">
                  <view class="list-item-right-tag">
                    <view class="list-item-right-tag-box">
                      <view class="list-item-right-tag-box-text center">
                        <view>{{ item.name }}</view>
                      </view>
                    </view>
                  </view>

                  <view class="list-item-right-tag" style="margin-left: 5rpx">
                    <view class="list-item-right-tag-box2">
                      <view class="list-item-right-tag-box-text2 center">
                        <view>{{ item.address }}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <fui-button
      @click="
        sheep.$router.go('/pages/qy/hiddendanger/update', {
          zhenggai: false,
        })
      "
      radius="96rpx"
      btnSize="medium"
      style="
        position: fixed;
        bottom: 50rpx;
        left: 50%;
        transform: translateX(-50%);
        padding: 8px 16px;
        border: none;
        font-size: 30rpx;
      "
      ><text
        class="cicon-add-round-o"
        style="font-size: 40rpx; margin-right: 20rpx"
      ></text>
      <p>添加</p>
    </fui-button>
  </s-layout>
</template>

<script setup>
import { ref, computed } from "vue";
import sheep from "@/sheep";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";


const listData = ref([
  {
    imageUrl:
      "https://ts1.cn.mm.bing.net/th/id/R-C.509ccdefc0757b3b81942324ae0802c2?rik=h6iPd%2bH5SF8vpA&riu=http%3a%2f%2fwww.gstyg.com%2fuploads%2fimage%2f20220618%2f80beb40135f6f3cc7a0e80413660314f.png&ehk=RtxjaSs3NCO1FZ57PjTgWAm8r9OaBxEaTpjdyLVAqeA%3d&risl=&pid=ImgRaw&r=0",
    title: "火灾自动报警系统",
    time: "2024-06-25",
    name: "王志浩",
    checkGroup: "B栋3层配电房",
    checkSituation: "风险较大",
  },
]);
const listData2 = ref([
  {
    imageUrl:
      "https://ts1.cn.mm.bing.net/th/id/R-C.509ccdefc0757b3b81942324ae0802c2?rik=h6iPd%2bH5SF8vpA&riu=http%3a%2f%2fwww.gstyg.com%2fuploads%2fimage%2f20220618%2f80beb40135f6f3cc7a0e80413660314f.png&ehk=RtxjaSs3NCO1FZ57PjTgWAm8r9OaBxEaTpjdyLVAqeA%3d&risl=&pid=ImgRaw&r=0",
    title: "火灾自动报警系统",
    time: "2024-06-25",
    name: "王志浩",
    checkGroup: "B栋3层配电房",
    checkSituation: "风险较大",
  },
]);

// 定义一个响应式变量来跟踪管理按钮是否被点击
const isManagementClicked = ref(false);

// 处理管理按钮的点击事件
const handleManagementClick = () => {
  isManagementClicked.value = !isManagementClicked.value;
};

// 用于存储当前显示编辑框的项目的 ID
// 初始化为 null，表示初始时没有任何编辑框显示
const activeEditItemId = ref(null);
// 点击"更多"图标时触发的函数
const editBoxShow = (item) => {
  // 获取被点击项目的 ID
  const currentItemId = item.id;
  // 检查：如果当前点击的项目的编辑框 *已经* 是显示的那个
  if (activeEditItemId.value === currentItemId) {
    // 就将其隐藏（通过将 activeEditItemId 设置回 null）
    activeEditItemId.value = null;
  } else {
    // 否则，显示当前点击项目的编辑框
    // 这会自动隐藏之前可能打开的任何其他项目的编辑框
    activeEditItemId.value = currentItemId;
  }
  console.log("当前显示编辑框的项目 ID:", activeEditItemId.value);
};

// 跳转至隐患详情页面
const navigateToDetail = (item) => {
  sheep.$router.go("/pages/qy/hiddendanger/detail", { id: item.id });
};

// 创建事件监听函数
const handleDataUpdate = () => {
  console.log("隐患排查列表页收到数据更新事件，准备刷新数据");
  // 使用延迟确保DOM已完全渲染
  setTimeout(() => {
    console.log("开始刷新隐患排查列表数据");
    get();
  }, 100); // 短暂延迟确保DOM已渲染
};

// 在页面加载时设置事件监听
onLoad(() => {
  // 注册事件监听
  uni.$on("hiddendangerDataUpdated", handleDataUpdate);
  get();
});

// 在页面卸载时移除事件监听
onUnload(() => {
  console.log("页面卸载，移除事件监听");
  uni.$off("hiddendangerDataUpdated", handleDataUpdate);
});

onShow(() => {
  // 页面显示时获取数据，但不重复注册事件
  // 事件监听已在onLoad中注册
});
function deleteItem(item) {
  const params = {
    s_id: item.id,
  };
  sheep.$api.qy_hiddendanger.delete(params).then((res) => {
    if (res.code == 200) {
      uni.showToast({
        title: "删除成功",
        icon: "none",
      });
    }
    get();
  });
}

function get() {
  const params = {
    company_id: sheep.$store("user").userInfo.company_id,
  };
  sheep.$api.qy_hiddendanger.list(params).then((res) => {
    console.log("listData", res);
    listData2.value = res.data;
  });
}

const searchKeyword = ref("");
const filteredList = computed(() => {
  if (!searchKeyword.value) {
    return listData2.value;
  }
  const keyword = searchKeyword.value.toLowerCase();
  return listData2.value.filter(
    (item) =>
      item.title.toLowerCase().includes(keyword) ||
      item.checkSituation.toLowerCase().includes(keyword) ||
      (item.address && item.address.toLowerCase().includes(keyword))
  );
});

const handleSearch = () => {
  // 使用计算属性自动过滤
};

const clearSearch = () => {
  searchKeyword.value = "";
};
</script>

<style lang="scss">
@import "@/sheep/scss/icon/_coloricon.scss";
page {
  background-color: #f0f3f8;
  height: 100%;
}

/* 搜索框样式 */
.filter-container {
  background-color: #fff;
  padding-bottom: 10rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.search-box {
  padding: 0rpx 20rpx;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 40rpx;
  padding: 10rpx 24rpx;
  margin-bottom: 24rpx;
}

.search-input {
  flex: 1;
  height: 60rpx;
  margin-left: 16rpx;
  font-size: 28rpx;
  color: #333;
}

.clear-btn {
  padding: 8rpx;
}

.more {
}
.list-item {
  width: 96%;
  margin: 20rpx auto;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.border_5 {
  border-radius: 5px;
}

.fadeInUp {
  animation-name: fadeInUp;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.list-item-box {
  width: 94%;
  margin: 0px auto;
  padding: 30rpx 15rpx;
  display: flex;
}

.list-item-left-img image {
  width: 180rpx;
  height: 200rpx;
  border-radius: 10px;
}

.list-item-right {
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .editBox {
    position: absolute;
    right: 0;
    top: 60rpx;
    background-color: #fff;
    width: 130rpx;
    border-radius: 8rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
    z-index: 10;
    overflow: hidden;
    animation: fadeIn 0.3s ease;

    .editBox-item {
      padding: 16rpx;
      text-align: center;
      transition: background-color 0.2s;

      &:hover {
        background-color: #f5f5f5;
      }

      .editBox-item-text {
        font-size: 25rpx;
        color: #333;
      }
    }
  }
}

.list-item-right-title {
  font-size: 30rpx;
  color: #333333;
  font-weight: 550;
  margin-top: 10rpx;
}

.list-item-right-detail {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 10rpx;
}
.list-item-right-detail2 {
  font-size: 26rpx;
  color: #0038b1;
  margin-bottom: 10rpx;
}
.list-item-right-detail3 {
  font-size: 26rpx;
  color: #0038b1;
  margin-bottom: 10rpx;
}
.list-item-right-tag-box {
  background-color: #f7ebde;
  display: inline-block;
  margin-bottom: 5rpx;
  padding: 3rpx 13rpx;
  border-radius: 8px;
}

.list-item-right-tag-box-text {
  height: 30rpx;
  font-size: 20rpx;
  font-weight: 550;
  color: #ff6633;
}

.list-item-right-tag-box2 {
  background-color: #f8f7f7;
  display: inline-block;
  margin-bottom: 5rpx;
  padding: 3rpx 13rpx;
  border-radius: 8px;
}

.list-item-right-tag-box-text2 {
  height: 30rpx;
  font-size: 20rpx;
  font-weight: 550;
  color: #8d8b8b;
}
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-item-management-add {
  background-color: rgb(255, 255, 255);
  color: rgb(83, 83, 83);
  display: inline-block;
  margin-top: 15rpx;
  padding: 10rpx 13rpx;
  border-radius: 8px;
}

.list-item-management {
  background-color: rgb(255, 255, 255);
  color: rgb(83, 83, 83);
  display: inline-block;
  margin-top: 15rpx;
  padding: 10rpx 13rpx;
  border-radius: 8px;
}

.list-item-management-text {
  height: 30rpx;
  font-size: 25rpx;
  font-weight: 550;
}

.list-item-management-box {
  display: flex;
  justify-content: space-between;
  width: 96%;
  margin: auto;
}

.modify-button {
  background-color: rgb(223, 231, 249);
  display: inline-block;
  padding: 10rpx 13rpx;
  border-radius: 8px;
}

.modify-txt {
  height: 30rpx;
  font-size: 25rpx;
  font-weight: 550;
  color: rgb(30, 21, 114);
}

.delete-button {
  background-color: rgb(249, 230, 223);
  display: inline-block;
  margin-top: 15rpx;
  padding: 10rpx 13rpx;
  border-radius: 8px;
}

.delete-txt {
  height: 30rpx;
  font-size: 25rpx;
  font-weight: 550;
  color: rgb(215, 60, 60);
}

.list-item-right-tag-border {
  display: flex;
}
</style>
